<script lang="ts" setup>
import {ref, reactive, computed, onMounted} from 'vue'

// 菜单项类型定义
interface MenuItem {
  id: number
  name: string
  icon: string
  active: boolean
}

// 列表项类型定义
interface ListItem {
  id: number
  title: string
  description: string
  date: string
  status: string
  priority: string
  progress: number
}

// 菜单数据
const menuItems = reactive<MenuItem[]>([
  {id: 1, name: '仪表盘', icon: 'fa-gauge-high', active: true},
  {id: 2, name: '项目', icon: 'fa-folder', active: false},
  {id: 3, name: '团队', icon: 'fa-users', active: false},
  {id: 4, name: '日历', icon: 'fa-calendar', active: false},
  {id: 5, name: '文档', icon: 'fa-file-lines', active: false},
  {id: 6, name: '设置', icon: 'fa-gear', active: false}
])

// 列表数据
const listItems = reactive<ListItem[]>([
  {
    id: 1,
    title: '网站重新设计',
    description: '为官网创建新的UI设计',
    date: '2023-08-15',
    status: '进行中',
    priority: '高',
    progress: 75
  },
  {
    id: 2,
    title: '移动应用开发',
    description: '开发公司新的移动应用程序',
    date: '2023-09-10',
    status: '进行中',
    priority: '中',
    progress: 45
  },
  {
    id: 3,
    title: '季度报告',
    description: '准备Q3财务和绩效报告',
    date: '2023-07-30',
    status: '待处理',
    priority: '高',
    progress: 10
  },
  {
    id: 4,
    title: '客户门户',
    description: '为客户开发新的门户网站',
    date: '2023-08-28',
    status: '进行中',
    priority: '中',
    progress: 60
  },
  {
    id: 5,
    title: 'API集成',
    description: '将支付系统集成到平台中',
    date: '2023-07-20',
    status: '已完成',
    priority: '低',
    progress: 100
  },
  {
    id: 6,
    title: '数据库迁移',
    description: '将数据迁移到新的数据库系统',
    date: '2023-08-05',
    status: '进行中',
    priority: '高',
    progress: 85
  }
])

// 当前活动菜单
const activeMenu = computed(() => menuItems.find(item => item.active))

// 切换菜单
const switchMenu = (id: number) => {
  menuItems.forEach(item => {
    item.active = item.id === id
  })
}

// 搜索关键词
const searchKeyword = ref('')

// 过滤列表
const filteredList = computed(() => {
  if (!searchKeyword.value) return listItems
  return listItems.filter(item =>
      item.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

// 状态样式映射
const statusClass = (status: string) => {
  switch (status) {
    case '已完成':
      return 'status-completed'
    case '进行中':
      return 'status-progress'
    case '待处理':
      return 'status-pending'
    default:
      return ''
  }
}

// 优先级样式映射
const priorityClass = (priority: string) => {
  switch (priority) {
    case '高':
      return 'priority-high'
    case '中':
      return 'priority-medium'
    case '低':
      return 'priority-low'
    default:
      return ''
  }
}

// 模拟数据加载
const isLoading = ref(true)
onMounted(() => {
  setTimeout(() => {
    isLoading.value = false
  }, 1500)
})
</script>

<template>
  <div class="admin-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo">
        <div class="logo-icon">
          <i class="fas fa-rocket"></i>
        </div>
        <span>NexusDashboard</span>
      </div>

      <div class="menu-section">
        <span class="section-label">主导航</span>
        <ul class="menu">
          <li
              v-for="item in menuItems"
              :key="item.id"
              :class="{ active: item.active }"
              @click="switchMenu(item.id)"
          >
            <div class="menu-item-content">
              <i :class="item.icon" class="fas"></i>
              <span>{{ item.name }}</span>
            </div>
            <div class="active-indicator"></div>
          </li>
        </ul>
      </div>

      <div class="sidebar-footer">
        <div class="user-info">
          <div class="avatar">
            <img
                alt="User"
                src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80">
          </div>
          <div class="user-details">
            <span class="username">Emma Chen</span>
            <span class="user-role">高级管理员</span>
          </div>
          <div class="user-actions">
            <i class="fas fa-ellipsis"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="header">
        <div class="breadcrumb">
          <span>首页</span>
          <i class="fas fa-chevron-right"></i>
          <span>{{ activeMenu?.name }}</span>
        </div>

        <div class="header-actions">
          <div class="search-box">
            <i class="fas fa-search"></i>
            <input
                v-model="searchKeyword"
                placeholder="搜索项目、任务或文档..."
                type="text"
            >
          </div>

          <div class="action-buttons">
            <button class="btn-icon">
              <i class="fas fa-plus"></i>
            </button>
            <button class="btn-icon">
              <i class="fas fa-bell"></i>
              <span class="badge">3</span>
            </button>
            <button class="btn-icon">
              <i class="fas fa-message"></i>
              <span class="badge">7</span>
            </button>
          </div>
        </div>
      </div>

      <div class="content">
        <!-- 加载状态 -->
        <div v-if="isLoading" class="loading-state">
          <div class="spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 仪表盘内容 -->
        <div v-else-if="activeMenu?.id === 1" class="dashboard">
          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-info">
                <span class="stat-value">12</span>
                <span class="stat-label">进行中项目</span>
              </div>
              <div class="stat-icon" style="background: linear-gradient(135deg, #6A11CB, #2575FC);">
                <i class="fas fa-folder-open"></i>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-info">
                <span class="stat-value">8</span>
                <span class="stat-label">已完成</span>
              </div>
              <div class="stat-icon" style="background: linear-gradient(135deg, #11998E, #38EF7D);">
                <i class="fas fa-check-circle"></i>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-info">
                <span class="stat-value">24</span>
                <span class="stat-label">团队成员</span>
              </div>
              <div class="stat-icon" style="background: linear-gradient(135deg, #FF416C, #FF4B2B);">
                <i class="fas fa-users"></i>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-info">
                <span class="stat-value">92%</span>
                <span class="stat-label">完成率</span>
              </div>
              <div class="stat-icon" style="background: linear-gradient(135deg, #FF9966, #FF5E62);">
                <i class="fas fa-chart-line"></i>
              </div>
            </div>
          </div>

          <div class="content-row">
            <div class="list-container">
              <div class="list-header">
                <h2>最近项目</h2>
                <button class="btn-text">
                  查看全部
                  <i class="fas fa-arrow-right"></i>
                </button>
              </div>

              <div class="list-content">
                <div v-for="item in filteredList" :key="item.id" class="list-item">
                  <div :class="priorityClass(item.priority)" class="item-priority"></div>
                  <div class="item-main">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.description }}</p>
                    <div class="item-progress">
                      <div class="progress-bar">
                        <div :style="{width: item.progress + '%'}" class="progress-fill"></div>
                      </div>
                      <span>{{ item.progress }}%</span>
                    </div>
                  </div>
                  <div class="item-meta">
                    <span class="date">{{ item.date }}</span>
                    <span :class="statusClass(item.status)" class="status">{{ item.status }}</span>
                  </div>
                  <div class="item-actions">
                    <button class="btn-icon">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn-icon">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="side-panel">
              <div class="panel-card">
                <h3>日程安排</h3>
                <div class="schedule-item">
                  <div class="schedule-time">
                    <span class="time">10:30</span>
                    <span class="duration">60分钟</span>
                  </div>
                  <div class="schedule-details">
                    <h4>产品设计评审</h4>
                    <p>与设计团队讨论新功能</p>
                  </div>
                </div>
                <div class="schedule-item">
                  <div class="schedule-time">
                    <span class="time">14:00</span>
                    <span class="duration">30分钟</span>
                  </div>
                  <div class="schedule-details">
                    <h4>客户会议</h4>
                    <p>与ABC公司讨论项目需求</p>
                  </div>
                </div>
                <div class="schedule-item">
                  <div class="schedule-time">
                    <span class="time">16:45</span>
                    <span class="duration">45分钟</span>
                  </div>
                  <div class="schedule-details">
                    <h4>团队周会</h4>
                    <p>每周进度同步会议</p>
                  </div>
                </div>
                <button class="btn-text full-width">
                  <i class="fas fa-calendar-plus"></i>
                  添加日程
                </button>
              </div>

              <div class="panel-card">
                <h3>活跃成员</h3>
                <div class="member-item">
                  <div class="avatar small">
                    <img
                        alt="User"
                        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80">
                  </div>
                  <div class="member-details">
                    <h4>张明</h4>
                    <p>前端开发</p>
                  </div>
                  <span class="online-indicator"></span>
                </div>
                <div class="member-item">
                  <div class="avatar small">
                    <img
                        alt="User"
                        src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1998&q=80">
                  </div>
                  <div class="member-details">
                    <h4>王丽</h4>
                    <p>UI设计师</p>
                  </div>
                  <span class="online-indicator"></span>
                </div>
                <div class="member-item">
                  <div class="avatar small">
                    <img
                        alt="User"
                        src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80">
                  </div>
                  <div class="member-details">
                    <h4>李强</h4>
                    <p>后端开发</p>
                  </div>
                  <span class="online-indicator away"></span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他菜单内容 -->
        <div v-else class="placeholder-content">
          <div class="placeholder-icon">
            <i :class="activeMenu?.icon" class="fas"></i>
          </div>
          <h2>{{ activeMenu?.name }}页面</h2>
          <p>这是{{ activeMenu?.name }}功能的内容区域</p>
          <button class="btn-primary">
            <i class="fas fa-plus"></i>
            创建新内容
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.admin-container {
  display: flex;
  min-height: 100%;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: #f8fafc;
  color: #334155;
}

/* 侧边栏样式 - 现代化设计 */
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.logo {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-section {
  padding: 24px 0;
  flex-grow: 1;
}

.section-label {
  display: block;
  padding: 0 24px 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
  font-weight: 600;
}

.menu {
  list-style: none;
}

.menu li {
  position: relative;
  margin: 4px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu li:hover {
  background: rgba(255, 255, 255, 0.05);
}

.menu li.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0) 100%);
}

.menu li.active .active-indicator {
  opacity: 1;
}

.active-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #6366F1;
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.menu-item-content {
  padding: 12px 16px 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-item-content i {
  width: 18px;
  text-align: center;
  color: #94A3B8;
}

.menu li.active .menu-item-content i {
  color: #6366F1;
}

.menu li.active .menu-item-content span {
  color: white;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.05);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.small {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  font-size: 0.9rem;
}

.user-role {
  font-size: 0.8rem;
  color: #94A3B8;
}

.user-actions {
  color: #94A3B8;
  cursor: pointer;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  background-color: white;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 5;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #64748B;
}

.breadcrumb span:last-child {
  color: #334155;
  font-weight: 500;
}

.breadcrumb i {
  font-size: 0.7rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  position: relative;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 0.9rem;
}

.search-box input {
  padding: 10px 15px 10px 38px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  width: 280px;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
  background: #F8FAFC;
}

.search-box input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #f18181;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all 0.2s ease;
  position: relative;
}

.btn-icon:hover {
  background: #F1F5F9;
  color: #475569;
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #EF4444;
  color: white;
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

/* 加载状态 */
.loading-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E2E8F0;
  border-top: 3px solid #6366F1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 仪表盘样式 */
.welcome-banner {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  border-radius: 12px;
  padding: 24px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.welcome-content h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.welcome-content p {
  opacity: 0.9;
}

.btn-primary {
  background: white;
  color: #6366F1;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  color: #64748B;
  font-size: 0.9rem;
  font-weight: 500;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.content-row {
  display: flex;
  gap: 24px;
}

.list-container {
  flex: 2;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.list-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F1F5F9;
}

.list-header h2 {
  color: #1E293B;
  font-size: 1.25rem;
  font-weight: 600;
}

.btn-text {
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748B;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-text:hover {
  color: #6366F1;
  background: #F8FAFC;
}

.full-width {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}

.list-content {
  padding: 0;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #F1F5F9;
  transition: background-color 0.2s ease;
  position: relative;
}

.list-item:hover {
  background-color: #F8FAFC;
}

.item-priority {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  margin-right: 16px;
}

.priority-high {
  background: #EF4444;
}

.priority-medium {
  background: #F59E0B;
}

.priority-low {
  background: #10B981;
}

.item-main {
  flex: 1;
}

.item-main h3 {
  color: #1E293B;
  margin-bottom: 6px;
  font-weight: 600;
}

.item-main p {
  color: #64748B;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.item-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 240px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  transition: width 0.5s ease;
}

.item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 20px;
  gap: 8px;
}

.date {
  color: #94A3B8;
  font-size: 0.8rem;
}

.status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-completed {
  background: #ECFDF5;
  color: #047857;
}

.status-progress {
  background: #FEF3C7;
  color: #B45309;
}

.status-pending {
  background: #FEF2F2;
  color: #B91C1C;
}

.item-actions {
  display: flex;
  gap: 8px;
}

.side-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.panel-card h3 {
  color: #1E293B;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.schedule-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.schedule-time .time {
  font-weight: 600;
  color: #1E293B;
}

.schedule-time .duration {
  font-size: 0.75rem;
  color: #94A3B8;
}

.schedule-details h4 {
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.schedule-details p {
  color: #64748B;
  font-size: 0.8rem;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}

.member-item:last-child {
  padding-bottom: 0;
}

.member-details h4 {
  font-weight: 600;
  color: #1E293B;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.member-details p {
  color: #64748B;
  font-size: 0.8rem;
}

.online-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.online-indicator.away {
  background: #F59E0B;
}

/* 占位内容样式 */
.placeholder-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.placeholder-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: white;
  font-size: 2rem;
}

.placeholder-content h2 {
  color: #1E293B;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.placeholder-content p {
  color: #64748B;
  margin-bottom: 24px;
  max-width: 400px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-row {
    flex-direction: column;
  }
}

@media (max-width: 968px) {
  .admin-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
  }

  .menu {
    display: flex;
    overflow-x: auto;
    padding: 0 16px 8px;
  }

  .menu li {
    flex-shrink: 0;
    margin: 4px 8px;
  }

  .active-indicator {
    display: none;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .search-box input {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .welcome-banner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .item-meta {
    display: none;
  }
}
</style>